<template>
	<view class="phone_code">
		<view style="padding: 15vh 30px 0;">
			<text class="phone_code_label">验证码已发送至</text>
			<view class="phone_code_count">
				<text class="phone_code_count_new">{{ newPhone }}</text>
				<view v-if="isReget" class="phone_code_count_reget">
					<button plain="true" type="warn" size="mini" @click="getCode">重新获取</button>
				</view>
				<text v-else class="phone_code_count_down">获取验证码<text>{{count}}</text>s</text>
			</view>
			<view class="phone_code_single">
				<input class="phone_code_single_cinput" adjust-position="false" auto-blur="true" @blur="codeNumBlurFun"
					@input="codeNumInputFun" :focus="focus" v-model="code" type="number" maxlength="6" />
				<view class="phone_code_single_codeinput">
					<view v-for="(item,index) in 6" :key="index" @click="codefocusFun(index)"
						:style="(index == code.length? 'background-color:#FDF6D6;':'color: #313131;background-color:#eee')">
						{{code[index]}}
					</view>
				</view>
			</view>
			<view style="display: flex;justify-content: flex-end;margin-top: 5vh;">
				<u-checkbox-group v-model="checkboxValue1" placement="column" @change="checkboxChange">
					<u-checkbox :customStyle="{marginBottom: '8px'}" v-for="(item, index) in checkboxList1" :key="index"
						:label="item.name" :name="item.name">
					</u-checkbox>
				</u-checkbox-group>
			</view>
			<button :disabled="isCode" class="btn" style="background-color:#FFDA06;margin-top: 40px;" type="warn"
				@click="submitFun()">确定</button>
		</view>
	</view>
</template>

<script>
	import {
		get,
		post
	} from "@/serve/method.js"
	export default {
		data() {
			return {
				newPhone: "", // 当前显示电话
				isReget: false, // 判断是否显示 ‘重新获取’按钮    
				timer: null, // 定时器
				count: 60, // 时间
				code: "", // 验证码  
				focus: true, // 焦点
				isCode: true, // ‘确定’按钮是否禁用
				userId: '',
				optionId: '',
				codetime: '', //验证码时间
				checkboxValue1: [],
				checkboxList1: [{
					name: '是否代签',
					disabled: false,
				}],
				storeIsProxy: '', //是否带签
			}
		},
		mounted(options) {
			let that = this
			uni.getStorage({
				key: 'lifeData',
				success: function(res) {
					that.newPhone = res.data.vuex_user.phonenumber
					that.userId = res.data.vuex_user.userId
					that.newPhone = `${that.newPhone.substring(0, 3)} **** ${that.newPhone.substring(7, 12)}`
					that.getTimer() // 开启定时器
					that.getCode() // 获取验证码 
				},
				fail: function(res) {
					if (res.errMsg == 'getStorage:fail data not found') {
						uni.reLaunch({
							url: '/pages/index/index'
						});
					}
				}
			})
		},
		watch: {
			count(val) {
				if (val == 0) {
					this.isReget = true
					clearInterval(this.timer)
				}
			},
		},
		onLoad(option) {
			console.log(option, 99999)
			let fileList = decodeURIComponent(option.id)
			console.log(JSON.parse(fileList), 99999)
			this.optionId = JSON.parse(fileList)
		},
		methods: {
			checkboxChange(n) {
				this.checkboxValue1 = n
				if (this.checkboxValue1.length > 0) {
					this.storeIsProxy = 1
				} else {
					this.storeIsProxy = 0
				}
				console.log('change', this.storeIsProxy);
			},
			/**
			 * AUTHOR: 单乘风
			 * DESC: 定时器  
			 * */
			getTimer() {
				this.timer = setInterval(() => {
					if (this.count == 0) {
						clearInterval(this.timer)
						uni.navigateBack({
							delta: 1
						})
						return
					}
					this.count--
				}, 1000)
			},

			/**
			 * AUTHOR: 单乘风
			 * DESC: 获取验证码   
			 * */
			getCode() {
				let that = this
				console.log("获取验证码", this.newPhone)
				let urls = `/api/contract/sendVerificationCode/${that.userId}`
				get(urls).then((itemss) => {
					console.log(itemss, '切换')
					that.codetime = itemss.data
				})
				if (this.count == 0) {
					this.count = 60
					this.isReget = false
					this.getTimer()
				}
			},
			/**
			 * AUTHOR: 单乘风
			 * DESC: 输入框输入事件 
			 * */
			codeNumInputFun(e) {
				let val = e.detail.value
				this.code = val
				if (val.length == 6) this.isCode = false
				else this.isCode = true
			},
			/**
			 * AUTHOR: 单乘风
			 * DESC: 输入框失去焦点事件 
			 * */
			codeNumBlurFun(e) {
				let val = e.detail.value
				this.focus = false
				if (val.length == 6) this.isCode = false
				else this.isCode = true
			},
			/**
			 * AUTHOR: 单乘风
			 * DESC: 输入框点击事件
			 * @param {Number} index 当前点击框索引
			 * */
			codefocusFun(index) {
				this.focus = true
			},
			/**
			 * AUTHOR: 单乘风
			 * DESC: 按钮点击事件
			 * */
			submitFun() {
				console.log(this.code, '验证码')
				console.log(this.codetime, '验证码时间')
				console.log(this.optionId, '房源详情')
				let data = {
					...this.optionId.data.contractVo,
					codeTime: this.codetime,
					checkCode: this.code,
					isProxy: this.storeIsProxy, //是否代签',0/代签，1/不带签
				}
				console.log(data, 88888999999)
				let url = '/api/feild/edit'
				post(url, data).then((res) => {
					console.log(res, 8888)
					console.log("确认更换手机号")
					uni.navigateTo({
						url: `/pages/detail/sign?id=${JSON.stringify(data)}`,
					});
				})
				// console.log("确认更换手机号")
				// uni.navigateTo({
				// 	url: `/pages/detail/sign`,
				// });
			},
		}
	}
</script>

<style lang="scss" scoped>
	.phone {
		// background-color: #FFF;


		&_code {
			background: linear-gradient(to bottom, #FFF7CB 0%, #ffffff 100%);
			width: 100vw;
			height: 100vh;

			&_label {
				// padding-top: 30vh;
				font-size: 30rpx;
				color: #999;
			}

			&_count {
				margin-top: 30rpx;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				height: 100rpx;

				&_new {
					color: #FFDA06;
					font-size: 38rpx;
					font-weight: bold;
				}

				&_down {
					border: 1rpx solid #eee;
					border-radius: 10rpx;
					color: #999;
					height: 60rpx;
					line-height: 60rpx;
					padding: 0 20rpx;

					text {
						margin-left: 10rpx;
					}
				}
			}

			&_single {
				margin-top: 30rpx;

				&_cinput {
					position: fixed;
					left: -100rpx;
					width: 50rpx;
					height: 50rpx;
				}

				&_codeinput {
					margin: auto;
					width: 650rpx;
					height: 100rpx;
					display: flex;
				}

				&_codeinput>view {
					margin-top: 5rpx;
					margin-left: 15rpx;
					width: 86rpx;
					height: 86rpx;
					line-height: 86rpx;
					font-size: 60rpx;
					font-weight: bold;
					color: #313131;
					text-align: center;
					border-radius: 10rpx;
				}

				&_codeinput>view:nth-child(1) {
					margin-left: 0rpx;
				}
			}
		}
	}
</style>